{% if sandbox_message %}
  <div class="alert alert-warning">
    <i class="fas fa-exclamation-circle"></i>&nbsp;{{ sandbox_message }}
  </div>
{% endif %}
<div id="squareup-notification">
  <div class="text-center alert alert-info"><i class="fas fa-circle-o-notch fa-spin"></i>&nbsp;{{ text_loading }}</div>
</div>
<form action="{{ action }}" method="POST" id="squareup_card_details_form" style="display: none;">
  <fieldset>
    <legend>{{ text_card_details }}</legend>
    {% if cards %}
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="squareup_select_card">{{ text_saved_card }}</label>
        <div class="col-sm-10">
          <select class="form-control" name="squareup_select_card" id="squareup_select_card">
            <option selected value>{{ text_new_card }}</option>
            {% for card in cards %}
              <option value="{{ card.id }}">{{ card.text }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    {% endif %}
  </fieldset>
  <fieldset id="hide-card-details">
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="id_card_number">{{ text_card_number }}</label>
      <div class="col-sm-10">
        <div id="id_card_number"></div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="id_card_expiry">{{ text_card_expiry }}</label>
      <div class="col-sm-10">
        <div id="id_card_expiry"></div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="id_cvc">{{ text_card_cvc }}</label>
      <div class="col-sm-10">
        <div id="id_cvc"></div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="id_card_zip_code">{{ text_card_zip }}</label>
      <div class="col-sm-10">
        <div id="id_card_zip_code"></div>
      </div>
    </div>
    {% if is_logged %}
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="squareup_save_card">{{ text_card_save }}</label>
        <div class="col-sm-10">
          <input type="checkbox" id="squareup_save_card" value="1" name="squareup_save_card"/>
        </div>
      </div>
    {% endif %}
  </fieldset>
  <div class="d-inline-block pt-2 pd-2 w-100">
    <div class="float-right">
      <button type="button" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_confirm }}</button>
    </div>
  </div>
  <input type="hidden" name="squareup_nonce" id="squareup_nonce"/>
</form>
<style>
  .col-form-label {
    cursor: pointer;
  }

  .form-control--focus {
    /* Indicates how form inputs should appear when they have focus */
    outline: 5px auto rgb(59, 153, 252);
  }

  .form-control--error {
    /* Indicates how form inputs should appear when they contain invalid values */
    outline: 5px auto rgb(255, 97, 97);
  }

  #squareup_save_card {
    margin-top: 10px;
    cursor: pointer;
  }
</style>
<script type="text/javascript">
$(document).ready(function() {
	var app_id = '{{ app_id }}';

	var paymentFormSettings = {
		applicationId: app_id,
		inputClass: 'form-control',
		inputStyles: [{
			fontSize: '15px'
		}],
		cardNumber: {
			elementId: 'id_card_number',
			placeholder: '{{ text_card_placeholder }}'
		},
		cvv: {
			elementId: 'id_cvc',
			placeholder: '{{ text_cvv }}'
		},
		expirationDate: {
			elementId: 'id_card_expiry',
			placeholder: '{{ text_expiry }}'
		},
		postalCode: {
			elementId: 'id_card_zip_code'
		},
		callbacks: {
			// Called when the SqPaymentForm completes a request to generate a card
			// nonce, even if the request failed because of an error.
			cardNonceResponseReceived: function(errors, nonce, cardData) {
				if (errors) {
					var message = '';

					errors.forEach(function(error) {
						message += error.message + '. ';
					});

					squareupError(message);
				} else {
					// No errors occurred. Extract the card nonce.
					$('#squareup_nonce').val(nonce);
					submitForm();
				}
			},

			unsupportedBrowserDetected: function() {
				squareupError("{{ error_browser_not_supported }}");
				// Fill in this callback to alert buyers when their browser is not supported.
			},

			paymentFormLoaded: function() {
				// Fill in this callback to perform actions after the payment form is
				// done loading (such as setting the postal code field programmatically).
				paymentForm.setPostalCode('{{ payment_zip|escape('js') }}');

				$('#squareup-notification').empty();
				$('#squareup_card_details_form').slideDown();
			}
		}
	};

	function submitForm() {
		var form = '#squareup_card_details_form';

		$.ajax({
			url: $(form).attr('action'),
			dataType: 'json',
			type: $(form).attr('method'),
			data: $(form).serialize(),
			beforeSend: function() {
				$('#button-confirm-order').button('loading');
			},
			success: function(json) {
				if (json.error) {
					squareupError(json.error);
				} else if (json.redirect) {
					document.location = json.redirect;
				}
			},
			error: function(jqXHR, ajaxSettings, thrownError) {
				squareupError(thrownError);
			},
			complete: function() {
				$('#button-confirm-order').button('reset');
			}
		});
	}

	function onScriptLoad() {
		paymentForm = new SqPaymentForm(paymentFormSettings);
		paymentForm.build();
	}

	function onConfirmCheckout() {
		if ($('#squareup_select_card').val()) {
			submitForm();
		} else {
			paymentForm.requestCardNonce();
		}
	}

	function squareupError(error) {
		$('#button-confirm-order').button('reset');

		$('#squareup-notification').html('<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="X"><span aria-hidden="true">&times;</span></button><i class="fas fa-exclamation-circle"></i>&nbsp;' + error + '</div>');
	}

	function toggleAjaxSetup(status) {
		$.ajaxSetup({
			cache: status
		});
	}

	function initSquareup(init_ajax_setup) {
		toggleAjaxSetup(false);

		var script = document.createElement('script');
		script.type = "text/javascript";
		$("head").append(script);
		script.onload = onScriptLoad;
		script.src = "{{ squareup_js_api }}";
		script.async = true;
		toggleAjaxSetup(init_ajax_setup);
	}

	$('#button-confirm-order').unbind().click(function(e) {
		e.preventDefault();
		e.stopPropagation();

		$('#squareup-notification').empty();
		$('#button-confirm-order').button('loading');

		onConfirmCheckout();
	});

	$('#squareup_select_card').change(function() {
		if ($(this).val()) {
			$('#hide-card-details').slideUp();
		} else {
			$('#hide-card-details').slideDown();
		}
	});

	initSquareup($.ajaxSetup().cache);
});
</script>